<template>
  <div class="copy copyBtn" :data-clipboard-text="msg" @click="setClipboard">
    {{ copy_success ? "复制成功！" : "复制" }}
  </div>
</template>

<script>
import Clipboard from "clipboard";
export default {
  name: "copy",
  data() {
    return {
      copy_success: 0,
    };
  },
  props: {
    msg: String,
  },
  methods: {
    setClipboard() {
      const clipboard = new Clipboard(".copyBtn");
      clipboard.on("success", (e) => {
        this.$data.copy_success = 1;
        setTimeout(() => {
          this.$data.copy_success = 0;
        }, 1000);
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        console.log("复制失败！该浏览器不支持复制！");
        clipboard.destroy();
      });
    },
  },
};
</script>

<style scoped>
.copy:hover {
  opacity: 0.5;
}
.copy {
  transition: 0.3s;
  font-size: 12px;
  cursor: pointer;
  color: rgb(148, 148, 148);
  padding: 2px 5px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  margin-left: 10px;
}
.total {
  font-size: 30px;
}
</style>